<template>
    <div class="confirmInfo-wrapper">
       <el-dialog
            :visible.sync="centerDialogVisible"
            width='1200px'
            center>
            <div class="confirmInfo-content">
                 <div name="info">
                    <!-- 基本资料 -->
                    <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" class="demo-formData">
                        <p class="secTitle">基本信息</p>
                        <div class="formSection">
                            <el-form-item label="昵称" prop="nickname">
                            <el-input v-model="formData.nickname"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="sex">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                            </el-form-item>
                            <el-form-item>
                            <div class="picContent">
                                <div class="avatar"><img :src="formData.avatar" />
                                <p>支持jpg、gif、png或bmp格式的图片，文件大小不超过2M</p>
                                </div>
                                <div v-show='$store.state.currentUser.type === "1"' class="picture"><img :src="formData.picture" />
                                <p>支持jpg、gif、png或bmp格式的图片，文件大小不超过2M</p>
                                </div>
                            </div>
                            <div class="uploadBtn">
                                <button onclick="document.getElementById('avatarFile').click();">头像上传</button> 
                                <button v-show='$store.state.currentUser.type === "1"' onclick="document.getElementById('pictureFile').click();">照片上传</button> 
                                <input type="file" id="avatarFile" accept="image/png,image/gif,image/jpeg" @change="uploadAva" class="inputFile"/>
                                <input type="file" id="pictureFile" accept="image/png,image/gif,image/jpeg" @change="uploadPic" class="inputFile"/>
                            </div>
                            </el-form-item>
                        </div>
                        <!-- 联系信息 -->
                        <div class="formSection">
                            <el-form-item label="真实姓名" prop="name" style='padding-bottom: 0;'>
                                <el-input v-model="formData.name"></el-input>
                            </el-form-item>
                            
                            <el-form-item label="常用邮箱" prop="email">
                                <el-input v-model="formData.email"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码" prop="phone">
                                <p class="fixedPhone" v-text="formData.phone" disabled="">123456789</p>
                            </el-form-item>
                            
                            <el-form-item v-show='$store.state.currentUser.type === "1"' label="身份证号码" prop="IDCard">
                                <el-input v-model="formData.IDCard"></el-input>
                            </el-form-item>
                            <el-form-item label="QQ号码" prop="QQ">
                                <el-input v-model="formData.QQ"></el-input>
                            </el-form-item>

                        </div>
                        <!-- 学校信息 -->
                        <div class="formSection">
                            <el-form-item label="学校名称" prop="school">
                            <el-select v-model="formData.school" placeholder="请选择学校">
                                <el-option v-for="(item, index) of schoolList" :label="item.label" :value="item.value" :key='index + "school"'></el-option>
                                <!-- <el-option label="学校二" value="beijing"></el-option> -->
                            </el-select>
                            </el-form-item>
                            <el-form-item label="年级" prop="grade">
                            <el-select v-model="formData.grade" placeholder="请选择年级">
                                <el-option label="大一" value="大一"></el-option>
                                <el-option label="大二" value="大二"></el-option>
                                <el-option label="大三" value="大三"></el-option>
                                <el-option label="大四" value="大四"></el-option>
                            </el-select>
                            </el-form-item>
                            <el-form-item label="专业" prop="major">
                            <el-input v-model="formData.major"></el-input>
                            </el-form-item>
                        </div>
                        <p class="secTitle" style="margin-top:100px;"></p>
                        <el-row class="saveBtn">
                        <el-button @click="update('formData')">保存</el-button>
                        </el-row>
                    </el-form>
                    </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { fileUpload, userInfo, updateInfo, orderByUser } from 'api/getData';

export default {
  name: 'personal',
  computed:{
    User(){
      return this.$store.state.currentUser
    }
  },
  created() {
    // 获取用户信息
    userInfo('0', '1').then(data => {
      let that = this,
        // 格式化性别
        formatSex = function (n) {
          data.sex.forEach(val => {
            if (val.value === n) {
              that.$set(that.formData, 'sex', val.label)
              that.sex = val.label
            }
          })
        },
        // 格式化学校
        formatSchool = function (n) {
          data.schools.forEach(val => {
            if (val.value === n) {
              that.$set(that.formData, 'school', val.label)
            }
          })
        }

      //  添加学校列表
      this.formData = data.info
      that.schoolList = data.schools
      formatSex(data.info.sex)
      // formatSchool(data.info.school)
    })
  },
  data() {
    return {
      isOrder: false,
      schoolList: {},
      sumbitFormBool: {
        nameBool: true,
        emailBool: true,
        IDCardBool: true,
        QQBool: true,
        schoolBool: true,
        gradeBool: true,
        majorBool: true
      },
      // 个人资料
      centerDialogVisible: true,
      sex: '',
      formData: {
        nickname: 'eee',
        sex: '男',
        name: '111',
        email: '',
        phone: '15106084131',
        IDCard: '',
        QQ: '',
        school: '',
        grade: '',
        major: '',
        avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1434568549,688660899&fm=27&gp=0.jpg',
        picture: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1434568549,688660899&fm=27&gp=0.jpg'
      },
      rules: {
        // 名字
        name: [
          { required: true, message: '请输入名字', trigger: 'blur' },
          { pattern: /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/, message: '请输入中文名字' }
        ],
        // 学校
        school1: [
          { required: false, cmessage: '请选择学校', trigger: 'change' },
        ],
        // 年级
        grade: [
          { required: false, cmessage: '请选择年级', trigger: 'change' },
        ],
        // 邮箱
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, trigger: 'blur', message: '输入的邮箱格式有误' },
        ],
        // 身份证
        IDCard: [
          { required: false, message: '请输入身份证号码', trigger: 'blur', },
          { pattern: /^[1-9]\d{5}(19\d{2}|20[01][0-8])(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])\d{3}[\dxX]$/, message: '输入的邮箱格式有误', trigger: 'blur' },
        ],
        // qq
        QQ: [
          { required: false, message: '请输入您的QQ', trigger: 'blur', },
          { pattern: /^[1-9]\d{4,10}$/, message: '您输入的QQ有误', trigger: 'blur' },
        ],
        // 专业
        major: [
          { required: false, message: '请正确输入您的专业', trigger: 'blur', },
          { pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/, message: '请正确输入您的专业', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    changeTab(isOrder) {
      let that = this;
      that.isOrder = isOrder;
    },
    //上传照片
    uploadPic(e) {
      let that = this;
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象  
      param.append('file', file);//通过append向form对象添加数据  
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }; //添加请求头 
      fileUpload(param, config).then(response => {
        that.formData.picture = response.url
      })
    },
    //上传头像
    uploadAva(e) {
      let that = this;
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象  
      param.append('file', file);//通过append向form对象添加数据  
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }; //添加请求头  
      fileUpload(param, config).then(response => {
        that.formData.avatar = response.url
      })
    },
    isSubmit(obj) {
      this.$set(this.sumbitFormBool, obj.name, obj.value)
    },
    update(formData) {
      let that = this;
      that.$refs[formData].validate((valid) => {

        if (valid) {
          // 性别转化
          if (that.sex === '男') {
            that.$set(that.formData, 'sex', '0')
          } else {
            that.$set(that.formData, 'sex', '1')
          }
          // 提交请求
          updateInfo('0', '1', that.formData).then(res => {
            alert('保存成功')
          }).catch(err => {
            alert('保存失败')
          })

        } else {
          return false;
        }
      });
    }
  }
}

</script>

<style lang="stylus" scoped>
@import '~style/base.styl';




  .secTitle {
    font-size: 22px;
    color: $color-text-l;
    text-align: left;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 24px;
  }

  .formSection {
    width: 400px;
    margin: 0 auto;
    margin-top: 40px;

    .picContent {
        @extend .clear-fix
        width 320px

      .avatar {
        float left
        width 120px
        
      }

      .picture {
        float left
        width 120px
        margin-left 80px
      }

      img {
        display block
        width: 120px;
        height: 120px;
        -o-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.16);
        -ms-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.16);
        -moz-box-shadow:0 2px 3px 0 rgba(0,0,0,0.16);
        -webkit-box-shadow:0 2px 3px 0 rgba(0,0,0,0.16);
        box-shadow:0 2px 3px 0 rgba(0,0,0,0.16);
      }

      p {
        @extend .clear-default
        font-size: $font-size-small-s;
        color: $color-text-ll;
        line-height: 20px;
      }
    }

    .uploadBtn {
      @extend .clear-fix;

      .inputFile {
        visibility: hidden;
        width: 1px;
      }

      button {
        float left
        border: 1px solid $color-theme;
        color: $color-theme;
        width: 80px;
        height: 24px;
        line-height: 22px;
        border-radius: 4px;
        margin-top 6px
        margin-left 20px
        background-color: $color-text;
        outline: none;
        cursor: pointer;

        &:hover {
          background-color: $color-theme;
          color: $color-text;
        }
      }
      button + button{
        margin-left 120px
      }
    }

    .fixedPhone {
      margin: 0;
    }

    .notice {
      width: 450px;
      margin-top: 8px;
      line-height: 14px;
      font-size: $font-size-small-s;
      color: $color-text-ll;
    }
  }

  .saveBtn {
    text-align: center;

    button {
      color: $color-theme;
      width: 200px;
      height: 40px;
      border: 1px solid $color-theme;
      border-radius: 4px;
      margin-top: 40px;

      &:hover {
        background-color: $color-theme;
        color: $color-text;
        border: 1px solid $color-text;
      }
    }
  }

  .orderHead {
    @extend .clear-fix
    border-bottom: 1px solid #cdcdcd;
    padding-bottom: 26px;

    p {
      float left
      width 16%
      text-align: center;
      font-size: $font-size-medium-x;
      color: $color-text-l;
    }
    p + p{
      margin-left 9px
    }
  }

  .orderBody {
    .orderContent {
      padding-bottom: 30px;
      border-bottom: 1px dashed #cdcdcd;

      .order {
        @extend .clear-fix

        >div {
          float left
          width 16%
          text-align: center;
          line-height: 200px;
          p{
            @extend .clear-default
          }
        }
        >div + div{
          margin-left 8px
        }

        .orderName {
          color: $color-text-m;
          font-size: $font-size-large;
        }

        .orderCourse {
          position relative
          height: 200px;
          text-align: center;
          line-height: 20px;
          color: $color-text-l;
          font-size: $font-size-medium;
          .listWrapper{
            position absolute 
            top 50%
            -moz-transform translateY(-50%)
            -o-transform translateY(-50%)
            -ms-transform translateY(-50%)
            -webkit-transform translateY(-50%)
            transform translateY(-50%)
          }
          .dachedLine {
            display: block;
            margin: 0 auto;
            margin-top: 10px;
            height: 0;
            width: 16%;
            border: 1px dashed #CDCDCD;
          }

          p {
            display: inline-block;
            padding-top: 10px;
            vertical-align: middle;
            line-height: 20px;
          }
        }

        .orderPrice {
          color: $color-text-m;
          font-size: $font-size-large;
        }

        .orderPay {
          color: $color-sub-pay;
        }

        .orderStatus {
          color: $color-text-m;
          font-size: $font-size-large;
        }

        .orderStatus span.red {
          color: #537AAA;
        }

        .orderStatus span.blue {
          color: #52C41A;
        }

        .orderStatus span.green {
          color: #D42222;
        }

        .orderOperate {
          line-height: 20px;

          .operateBtn {
            line-height: 20px;
            margin-top: 85px;

            button {
              width: 88px;
              height: 32px;
            }

            .main {
              border-radius: 4px;
              color: $color-sub-pay;
              border: 1px solid $color-sub-pay;
              background-color: $color-text;
              cursor: pointer;
              outline: none;
            }

            .sub {
              display: block;
              margin: 10px auto;
              color: $color-text-ll;
              font-size: $font-size-medium;
              cursor: pointer;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }

      .bottomInfo {
        padding-right: 54px
        text-align right;
        font-size: $font-size-medium;
        color: $color-text-l;
        
        .orderCode{
          margin-left 32px
        }
      }
    }
  }


.el-form-item__label {
  color: $color-text-ll;
  font-size: $font-size-medium-x;
  padding: 0 26px 0 0;
}

.el-input, .el-select {
  width: 280px;
}

.el-input__inner {
  border: 1px solid #CDCDCD;
}
</style>


